<template>
	<a-card title="用户管理" :body-style="{ padding: '0' }">
		<!-- 用户列表表格 -->
		<a-table :columns="columns" :data-source="users" :pagination="false" :row-key="(record) => record.id" bordered>
			<template #bodyCell="{ column, record }">
				<!-- 用户头像 -->
				<template v-if="column.key === 'logo'">
					<img :src="record.logo || ''" alt="头像" style="width: 50px; height: 50px" />
				</template>
				<!-- 用户姓名 -->
				<template v-else-if="column.key === 'username'">
					{{ record.username }}
				</template>
				<!-- 用户电话 -->
				<template v-else-if="column.key === 'phone'">
					{{ record.phone }}
				</template>
				<!-- 用户邮箱 -->
				<template v-else-if="column.key === 'email'">
					{{ record.email }}
				</template>
				<!-- 用户性别 -->
				<template v-else-if="column.key === 'gender'">
					{{ record.gender === 'male' ? '男' : record.gender === 'female' ? '女' : '暂无' }}
				</template>
				<!-- 用户职业 -->
				<template v-else-if="column.key === 'career'">
					{{ record.career }}
				</template>
				<!-- 用户状态 -->
				<template v-else-if="column.key === 'status'">
					{{ getStatus(record.status) }}
				</template>
				<!-- 操作列 -->
				<template v-else-if="column.key === 'action'">
					<a @click="handleAction(record)">
						{{ record.status === 'normal' ? '禁用' : '恢复' }}
					</a>
				</template>
				<!-- 默认展示 -->
				<template v-else>
					{{ record[column.dataIndex] }}
				</template>
			</template>
		</a-table>

		<!-- 分页器 -->
		<a-pagination
			class="pagination"
			:current="pagination.current"
			:page-size="pagination.pageSize"
			:total="pagination.total"
			:page-size-options="['5', '10', '20', '50']"
			@change="handlePageChange"
			@showSizeChange="handlePageSizeChange"
			:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
			:locale="{ items_per_page: '条/页' }"
		></a-pagination>

		<!-- 操作确认 Modal -->
		<a-modal
			v-model:visible="isConfirmModalVisible"
			title="确认操作"
			ok-text="确认"
			cancel-text="取消"
			@cancel="handleCancelConfirmModal"
			@ok="showPasswordModal"
		>
			<!-- 如果当前操作是禁用，则显示禁用理由输入框 -->
			<a-form-item v-if="currentRecord && currentRecord.status === 'normal'" label="禁用理由">
				<a-textarea v-model:value="remarks" placeholder="请输入禁用理由" :rows="3" />
			</a-form-item>
			<p v-else>{{ confirmMessage }}</p>
		</a-modal>

		<!-- 输入密码 Modal -->
		<a-modal
			v-model:visible="isPasswordModalVisible"
			title="请输入管理员密码"
			@cancel="handleCancelPasswordModal"
			@ok="handlePasswordSubmit"
			ok-text="确认下架"
			cancel-text="取消"
			:confirm-loading="isLoading"
		>
			<a-input-password v-model:value="password" placeholder="请输入管理员密码" />
		</a-modal>
	</a-card>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { message } from 'ant-design-vue';
	import adminApi from '@/api/adminApi'; // 导入调用后端的API

	// -------------------- 列表和分页 --------------------
	const users = ref([]); // 用户列表数据
	const pagination = reactive({
		current: 1,
		pageSize: 5,
		total: 0
	});

	const columns = [
		{ title: '头像', dataIndex: 'logo', key: 'logo', width: 50 },
		{ title: '姓名', dataIndex: 'username', key: 'username', width: 120 },
		{ title: '电话', dataIndex: 'phone', key: 'phone', width: 50 },
		{ title: '邮箱', dataIndex: 'email', key: 'email', width: 80 },
		{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
		{ title: '职业', dataIndex: 'career', key: 'career', width: 150 },
		{ title: '状态', dataIndex: 'status', key: 'status', width: 80 },
		{ title: '操作', dataIndex: 'action', key: 'action', width: 80 }
	];

	// Modal 状态
	const isConfirmModalVisible = ref(false); // 确认操作 Modal
	const isPasswordModalVisible = ref(false); // 密码输入 Modal
	const password = ref(''); // 管理员密码
	const isLoading = ref(false); // 是否正在加载
	const remarks = ref(''); // 禁用理由

	// 当前操作记录
	const currentRecord = ref(null);
	const confirmMessage = ref(''); // 操作确认消息

	// 获取所有用户数据
	const loadUsers = () => {
		adminApi
			.getAllUsers(pagination.current, pagination.pageSize)
			.then((res) => {
				if (res.code === 200) {
					users.value = res.data.userList;
					pagination.total = res.data.total;
				} else {
					message.error(res.message || '获取用户列表失败');
				}
			})
			.catch(() => {
				message.error('获取用户数据失败');
			});
	};

	// 分页相关
	const handlePageChange = (page) => {
		pagination.current = page;
		loadUsers();
	};

	const handlePageSizeChange = (current, size) => {
		pagination.pageSize = size;
		pagination.current = 1;
		loadUsers();
	};

	// 状态转换为中文显示
	const getStatus = (status) => {
		const map = {
			normal: '正常',
			disabled: '禁用'
		};
		return map[status] || status;
	};

	// 操作列点击事件
	const handleAction = (record) => {
		currentRecord.value = record;
		const action = record.status === 'normal' ? '禁用' : '恢复';
		confirmMessage.value = `确定要${action}该用户？`;

		// 弹出确认Modal
		isConfirmModalVisible.value = true;
	};

	// 显示密码输入 Modal
	const showPasswordModal = () => {
		if (currentRecord.value.status === 'normal') {
			if (remarks.value === '') {
				message.warn('请输入禁用理由！');
				return;
			}
		}
		isConfirmModalVisible.value = false;
		isPasswordModalVisible.value = true;
	};

	// 取消确认 Modal
	const handleCancelConfirmModal = () => {
		isConfirmModalVisible.value = false;
	};

	// 取消密码输入 Modal
	const handleCancelPasswordModal = () => {
		isPasswordModalVisible.value = false;
		password.value = '';
	};

	// 提交密码，执行禁用或恢复操作
	const handlePasswordSubmit = () => {
		if (!password.value) {
			message.warn('请输入密码');
			return;
		}

		isLoading.value = true;
		const action = currentRecord.value.status === 'normal' ? 'disableUser' : 'enableUser';

		adminApi[action]({
			id: currentRecord.value.id,
			password: password.value
		})
			.then((res) => {
				if (res.code === 200) {
					message.success('操作成功');
					loadUsers(); // 刷新用户列表
					isPasswordModalVisible.value = false; // 关闭密码输入 Modal
				} else {
					message.error('操作失败');
				}
			})
			.catch(() => {
				message.error('操作失败');
			})
			.finally(() => {
				isLoading.value = false;
			});
	};

	// 页面加载时获取所有用户
	onMounted(() => {
		loadUsers();
	});
</script>

<style scoped>
	.pagination {
		margin: 1rem 0;
		text-align: right;
	}
</style>
